<template>
    <div>
      <swiper :banner="banner"></swiper>
      <div class="source">
        <ul>
          <li v-for="(v, k) in source" :key="k" class="item" @click="$router.push({path: '/sourcedetail', query: {id: v.id}})">
            <h3>{{v.title}}</h3>
            <span>{{t2s(v.updated_at)}}</span>
          </li>
        </ul>
      </div>
    </div>
</template>

<script>
import Swiper from '../components/swiper'
import * as info from '../api/info'
import * as t from '../utils/time'
export default {
  name: 'learn-source',
  data () {
    return {
      banner: [
        // {
        //   url: '../../static/images/banner1.jpg'
        // },
        // {
        //   url: '../../static/images/banner2.jpg'
        // },
        // {
        //   url: '../../static/images/banner3.jpg'
        // }
      ],
      source: [
        {
          id: 0,
          category: '知识点拨',
          time: '2019-03-31',
          title: '如何提高自己的口语交际能力'
        },
        {
          id: 1,
          category: '趣味问答',
          time: '2019-03-31',
          title: '如何提高自己的口语交际能力'
        },
        {
          id: 2,
          category: '知识点拨',
          time: '2019-03-31',
          title: '如何提高自己的口语交际能力'
        },
        {
          id: 3,
          category: '知识点拨',
          time: '2019-03-31',
          title: '如何提高自己的口语交际能力'
        }
      ]
    }
  },
  components: {
    'swiper': Swiper
  },
  methods: {
    getBanner () {
      info.getBanners(1, 5)
        .then(res => {
          this.banner = res.data
        })
    },
    t2s (time) {
      return t.t2s(time)
    },
    getArticles () {
      info.getArticlesList()
        .then(res => {
          this.source = res.data
          console.log(res.data)
        })
    }
  },
  mounted () {
    this.getBanner()
    this.getArticles()
  }
}
</script>

<style scoped>
.source{
  padding: 0 .3rem;
}
.item{
  display: flex;
  display: -webkit-flex;
  align-items: center;
  justify-content: space-between;
  height: 1.2rem;
  border-bottom: 1px solid #e1e1e1;
}
.item h3{
  flex-grow: 1;
  width: 7rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.item span{
  width: 2.3rem;
  flex-shrink: 0;
}
</style>
